<script setup>
import ImgSelect from "@/components/ImgSelect.vue";
import { useCreate } from "@/store/useCreate.js";
import { ref, onMounted, computed, watch } from "vue";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { useFileSelect } from "@/composables/fileSelect";

const createStore = useCreate();
const { formData } = storeToRefs(createStore);
const { selectedFile, triggerFileSelect, uploadFile } = useFileSelect();

const selectedFileHandle = () => {
  if (formData.value.introduce.introduce.split(",").length >= 9) {
    ElMessage.warning("最多上传9张图片");
    return;
  }
  triggerFileSelect();
};
watch(selectedFile, (File) => {
  uploadFileAsync(File);
});

const uploadFileAsync = async (File) => {
  const upload = await uploadFile(File);
  if (upload && upload.code === 200) {
    introduce.value.push(upload.data.url);
    formData.value.introduce.introduce = introduce.value.join(",");
  }
};

const introduce = computed(() => {
  if (!formData.value.introduce || !formData.value.introduce.introduce) {
    return [];
  }
  return formData.value.introduce.introduce.split(",");
});

const confirm = async () => {
  const check = introduce.value.filter((item) => item);
  if (check && check.length === 0) {
    ElMessage.warning("请上传图片");
    return;
  }
  createStore.setCurrentStepId(7);
  createStore.setRequiredNumber(5, 0);
};
</script>

<template>
  <div class="header">
    <div class="left">
      <h4>上传图文</h4>
      <p>你可以通过增加不同的图文模块丰富详情内容</p>
    </div>
    <div>
      <el-button class="confirm-btn" @click="confirm">确认</el-button>
    </div>
  </div>
  <div class="form-content">
    <div class="left">
      <h4>图片：</h4>
      <ul>
        <li>建议图片尺寸宽度710px</li>
        <li>每张图片高度不超过2000px</li>
        <li>图片数量不超过9张</li>
      </ul>
      <h4>图片上字号建议：</h4>
      <p>
        最小字号不小于18，可将右侧示例图截图比对，字号太小不利于买家手机阅读
      </p>
      <h4>内容建议：</h4>
      <p>
        建议从【个人介绍】、【为什么选择我】、【服务方案详细说明】、【服务流程】四个维度图文并茂地去描述服务的优势和特色。
        请注意：纯文字或纯图片的详情内容均不予通过。
      </p>
    </div>
    <div class="center">
      <ImgSelect
        v-for="(item, index) of introduce"
        :imgIndex="index"
        :imgList="introduce"
        :key="index"
        :img="item"
      />
      <p class="add" @click="selectedFileHandle" v-if="introduce.length < 9">
        + 添加图片
      </p>
    </div>
    <div class="right">
      <div class="view-img">
        <img
          v-for="(item, index) of introduce"
          :key="index"
          :src="item"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;

  .left {
    flex: 1;

    h4 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    p {
      color: rgba(25, 30, 40, 0.48);
      font-size: 14px;
    }
  }

  .confirm-btn {
    width: 160px;
    height: 48px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border: none;
  }
}

.form-content {
  display: flex;
  padding-top: 33px;
}

.left {
  flex: 0 0 250px;
  color: #191e28;

  h4 {
    margin-top: 30px;
    margin-bottom: 16px;
    font-size: 16px;

    &:first-child {
      margin-top: 0;
    }
  }

  ul {
    padding-left: 15px;
  }

  p {
    line-height: 24px;
  }
}

.center {
  margin-left: 50px;
  position: relative;
  z-index: 2;
  .add {
    text-align: center;
    color: #1dbf73;
    cursor: pointer;
    user-select: none;
  }
}
.right {
  flex: 1;
  background: #f9fafb;
  border-radius: 16px 16px 16px 16px;
  margin-left: 26px;
  display: flex;
  justify-content: center;
  padding: 30px;
  .view-img {
    width: 430px;
    max-height: 1080px;
    overflow-y: auto;
    border-radius: 16px 16px 16px 16px;
    user-select: none;
    img {
      width: 100%;
      display: block;
      margin-bottom: 0;
    }
  }
}
</style>